<template>
	<view class="container">		
		<view class="guess-section">
			<!-- 健身环境-->
			<view class="public-title" v-for="(item, index) in ambientList" :key="index">
				<view class="s-header">
				 <text class="title">{{item.name}}</text>
				</view>
				<view class="tyk-view-image">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	import service from '../../service.js';
	export default {
		data() {
			return {
				ambientList:[] //教练列表
			};
		},
		async onLoad(){
			this.loadData();
		},
		methods:{
			
			async loadData() {
				var [error, res] = await uni.request({
					method:'POST',
					url: service.baseUrl+'/api/home/getAmbientList', 
					data: {},
					header: {'Content-Type': 'application/json'}
				});
				if(res.data.code=200){
					//教练列表
					this.ambientList=res.data.data;
				}else{
					 uni.showToast({
					    icon: 'error',
					    title: res.data.message,
					});
				}
			}
		}
	}
</script>

<style lang="scss">
 
	.public-title{
		align-items:center;
		color: $font-color-base;
		background-color: #ffffff;
		border-top: 1px solid #d8d8d8;
		.s-header{
			padding: 30upx 30upx;
			display:flex;
			align-items:center;
			line-height: 1;
			.icon-you{
				font-size: $font-lg;
				color: $font-color-light;
				flex: 1;
				text-align: right;
			}
			text{
				font-size: $font-sm;
				font-weight: 600;
			}
		}
		.tyk-view-image{
			image{
				width: 100%;
				height: 330upx;
			}
		}
	}
	
</style>
